<template>
  <div class="standard-grid --padding-horizontal --auto-rows about-index">
    <div class="about-index__container">
      <div><span><img src="../../assets/imgs/logo.png" alt=""></span></div>
       <common-list :lists="lists" :switchKey="false"></common-list>
    </div>
  </div>
</template>
<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import CommonList from '../../components/common/common-list'
  @Component({
    components:{
      CommonList
    }
  })
  export default class CollectIndex extends Vue {
        private lists=[
          {title:'当前版本',linkUrl:'javascript:;'},
          {title:'版本更新',linkUrl:'javascript:;'}
        ]
  }
</script>
<style lang="scss">
  @include component(about-index){
    @extend %padding;

    @include part(container){
      grid-column: 1 / 2 span;

      div{
        text-align: center;
        padding-bottom: $mobile-row-3;
        span{
          display: inline-block;
          width: 100px;
          height: 100px;
          border-radius: 10%;
          overflow: hidden;
          box-shadow: 0 0 3px 2px #ccc;
          img{
            width: 100%;
            object-fit: cover;

          }
        }


      }
    }

    @include component(common-list){
      li{
        @for $i from 1 through 2 {
          &:nth-child(n + #{$i}){
            a{
              &:after{
               background: none;
                width: auto;
              }


            }
          }

          &:nth-child(1){
           a{
             &:after{
               content: '5.4.1';
             }
           }
          }


          &:nth-child(2){
            a{
              &:after{
                content: '无版本更新';
              }
            }
          }
        }
      }

    }
  }
</style>
